<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template v-cloak>
    <div class="outer" :style="{ height:heightValue }">
        <div class="empty" v-if="!items.length">
            <empty>
                <div>请从右侧设置面板中选择添加文章</div>
            </empty>
        </div>
        <div class="hot-news" v-if="items.length">
            <div style="height: 80px;"></div>
            <el-carousel class="hot-news-titles" :direction="vertical" :interval="2000" :height="100" :autoplay="true"
                :indicator-position="'outside'">
                <el-carousel-item v-for="group in groupedItems" :key="group">
                    <div class="group-container">
                        <div class="title" v-for="news in group" :key="news.id">
                            <div class="hot-tag">热</div>
                            {{ news.title }}
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- <style0 :items="items" /> -->
    </div>
</template>
<script>
// import Style0 from "./Style0";

import { getNewsList } from "@/api/weapp";
import Empty from "../Base/Empty";
export default {
    components: { Empty },
    props: {
        module: { type: Object },
    },

    mounted: function () {
        this.loadData();
    },

    watch: {
        "module.items": function (ids) {
            if (!ids || ids.length == 0) {
                this.loading = false;
                this.items = [];
                // return;
            }
            this.loadData();
        },
        "module.data.dataFrom": function (val) {
            this.loadData();
        },
    },

    computed: {
        heightValue: function () {
            return this.module.height.value + "px";
        },
    },
    data() {
        return {
            items: [],
            loading: false,
            vertical: 'vertical',
        };
    },

    methods: {
        loadData: function () {
            var data = {}
            if (this.module.data.dataFrom == 'auto') {
                data.is_top = true
            } else {
                data.ids = this.module.items.join(",")
            }
            this.loading = true;
            getNewsList(data).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    this.items = resp.data
                    // 将items进行分组，每三个为一组
                    this.groupedItems = [];
                    for (let i = 0; i < this.items.length; i += 3) {
                        this.groupedItems.push(this.items.slice(i, i + 3));
                    }
                }
            });
        },
    },
};
</script>

<style scoped>
.outer {
    width: 100%;
}

.hot-news {
    width: 100%;
}

.hot-news-titles {
    /* top: 74px;
    left: 20px; */
    padding: 18px 0 10px 26px;
    width: 650px;
    height: 236px;
    margin: 0 auto 0 auto;
    border-radius: 10px;
    /* background-color: #fff; */
    box-sizing: border-box;
}

.hot-news-titles .title {
    width: 570px;
    height: 38px;
    color: #666;
    font-size: 26px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 33px;
}

.hot-news-titles .hot-tag {
    font-size: 20px;
    color: #fff;
    font-weight: 200;
    background-color: #ff7979;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: inline-block;
    line-height: 30px;
    text-align: center;
    position: relative;
    top: -2px;
}
</style>